﻿/* ----- production ----- */
var BASEDIR = "http://toukokuusuomessa.50webs.com";
/* ----- local file ----- */
/*-----
var BASEDIR = "file:///c:/Users/toukokuu/Web Development/toukokuusuomessa2.0";
-----*/

/*****************************************************************************************************************************************/
/**************************************************************** Classes ****************************************************************/
/*****************************************************************************************************************************************/

// City Class
function City()
{
    this.name;
    this.shortName;
    
    this.startDate;
    this.endDate;
    
	this.titleImageText;

	this.details; // Details object
	this.stories; // array of Story objects
	this.picturesUrl;
	this.pictures; // array of Picture objects
	this.map; // Map object
	this.faqs; // array of FAQ objects	
}

// Details Class
function Details()
{
    this.topTextColor; // HTML color
    this.bottomTextColor; // HTML color
    
    // cityName
    this.nameFinnish; // string
    this.nameSwedish; // string
    
    // cityInfo
    this.population; // string 
    this.province; // string
    
    // cityLinks
    this.websiteUrl; // url
    this.wikiUrl; // url
    
    // missionaryInfo
    this.apartmentArea; // string
    this.apartmentAddress; // string
    this.transportation; // string
    
    // churchInfo
    this.churchArea; // string
    this.churchAddress; // string
    this.wardName; // string
    
    // companions
    this.companions; // string
}

// Story Class
function Story(title)
{
    this.title = title; // string
    this.html = ""; // string
    
    this.addParagraph = addParagraph;
    this.addTextblock = addTextblock;
}

function addParagraph(paragraph)
{
    if(this.html != "")
    {
        this.html += "<br/>";
    }
    this.html += ("<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + paragraph);
}

function addTextblock(textblock)
{
    if(this.html != "")
    {
        this.html += "<br/>";
    }
    this.html += ("<br/>" + textblock);
}

// Picture Class
function Picture(url, title, description)
{
    this.url = url; // string
    this.title = title; // string
    this.description = description; // string
}

// Map Class
function Map()
{
    this.latitude; // decimal
    this.longitude; // decimal
    this.zoomLevel; // int
}

// FAQ Class
function FAQ(question, answer)
{
    this.question = question; // string
    this.answer = answer; // string
}

/*****************************************************************************************************************************************/
/*************************************************************** Variables ***************************************************************/
/*****************************************************************************************************************************************/

var curCity = null;

var detailsLoaded = false;
var storiesLoaded = false;
var picturesLoaded = false;
var mapLoaded = false;
var faqLoaded = false;

/*****************************************************************************************************************************************/
/*************************************************************** Functions ***************************************************************/
/*****************************************************************************************************************************************/

$(document).ready(function ()
{
    curCity = getCity();
    
    $('.startDate').html(curCity.startDate);
    $('.endDate').html(curCity.endDate);
    $('.lbImage').attr('src', BASEDIR + '/img/' + curCity.shortName + "/toukokuu.jpg");

    $('.content_container').hide();
    showContent("details");
    
    $('.mb_tab').click(function(){
        $('.mb_tab_selected').removeClass('mb_tab_selected');
        $(this).addClass('mb_tab_selected');
        
        $('.content_container').hide();
        showContent($(this).text());
    });
    
    $('.mb_tab').hover(function ()
    {
        if(!$(this).hasClass('mb_tab_selected') )
        {
            $(this).addClass('mb_tab_highlighted');
        }
    }, function ()
    {
        $(this).removeClass('mb_tab_highlighted');
    });
    
    $('.tb_button').click(function ()
    {
        var height = $(document).height();
        var width = $(document).width();
        
        $('.lbOverlay').height(height);
        $('.lbOverlay').show();
        
        $('.lbMain').css("top", (height - 340)/2);
        $('.lbMain').css("left", (width - 640)/2);
        $('.lbMain').fadeIn();

    });
    
    $('.lbOverlay , .lbMain').click(function ()
    {
        $('.lbOverlay').hide();
        $('.lbMain').hide();
    });
});

function showContent(contentType)
{
    $('#' + contentType + '_container').show();
    if(!isLoaded(contentType))
    {
        loadContent(contentType);
    }
}

function isLoaded(contentType)
{
    switch(contentType)
    {
        case 'details' : return detailsLoaded;
        case 'stories' : return storiesLoaded;
        case 'pictures' : return picturesLoaded;
        case 'map' : return mapLoaded;
        case 'faq' : return faqLoaded;
    }
    return false; 
}

function loadContent(contentType)
{
    switch(contentType)
    {
        case 'details' : loadDetails(); return;            
        case 'stories' : loadStories(); return;
        case 'pictures' : loadPictures(); return;
        case 'map' : loadMap(); return;
        case 'faq' : loadFAQ(); return;
    }
}

/* Details */
function loadDetails()
{
    if(!detailsLoaded)
    {
        try
        {
            $('#detailsMain').css("backgroundImage","url(../img/" + curCity.shortName + "/vaakunabkg.jpg)");
           
            $('#topLeft').css({ color: curCity.details.topTextColor });
            $('#topMiddle').css({ color: curCity.details.topTextColor });
            $('#topRight').css({ color: curCity.details.topTextColor });
            $('#bottomLeft').css({ color: curCity.details.bottomTextColor });
            $('#bottomMiddle').css({ color: curCity.details.bottomTextColor });
            $('#bottomRight').css({ color: curCity.details.bottomTextColor });
            
            // cityName
            $('#nameFinnish').text(curCity.details.nameFinnish);
            $('#nameSwedish').text("(" + curCity.details.nameSwedish + ")");
            
            // cityInfo
            var cityInfoInnerHTML = "";
            cityInfoInnerHTML += "<br/>Population: " + curCity.details.population;
            cityInfoInnerHTML += "<br/>Province: " + curCity.details.province;
            $('#cityInfo').html(cityInfoInnerHTML);
            
            // cityLinks
            var cityLinksInnerHTML = "";
            cityLinksInnerHTML += "<br/><a class=\"link dataTop\" href=\"" + curCity.details.websiteUrl + "\" target=\"_new\">" + curCity.details.nameFinnish + " Website</a>";
            cityLinksInnerHTML += "<br/><a class=\"link dataTop\" href=\"" + curCity.details.wikiUrl + "\" target=\"_new\">" + curCity.details.nameFinnish + " on Wikipedia</a>";
            $('#links').html(cityLinksInnerHTML);
            $('.link').css({ color: curCity.details.topTextColor });
            
            // missionaryInfo
            var missionaryInfoInnerHTML = "";
            missionaryInfoInnerHTML += "<br/>Apartment Area: " + curCity.details.apartmentArea;
            missionaryInfoInnerHTML += "<br/>Apartment Address: " + curCity.details.apartmentAddress;
            missionaryInfoInnerHTML += "<br/>Transportation: " + curCity.details.transportation;
            $('#missionaryInfo').html(missionaryInfoInnerHTML);
            
            // churchInfo
            var churchInfoInnerHTML = "";
            churchInfoInnerHTML += "<br/>Church Area: " + curCity.details.churchArea;
            churchInfoInnerHTML += "<br/>Church Address: " + curCity.details.churchAddress;
            churchInfoInnerHTML += "<br/>Ward / Branch: " + curCity.details.wardName;
            $('#churchInfo').html(churchInfoInnerHTML);
            
            // companions
            var companionsInnerHTML = "";
            companionsInnerHTML += "<br/>" + curCity.details.companions;
            $('#companions').html(companionsInnerHTML);
        }
        catch(e) { alert("Error: " + e.message); }
        detailsLoaded = true;
    }
}

/* Stories */
var curStoryIndex = null;
var storyTitlesInnerHTML = "";
function loadStories()
{
    if(!storiesLoaded)
    {
        try
        {
            if(curCity != null)
            {
                for(i = 0; i < curCity.stories.length; i++)
                {
                    // story title
                    storyTitlesInnerHTML += "<div class=\"storyTitle\" id=\"storyTitle" + i + "\">";
                    storyTitlesInnerHTML += "<p class=\"storyTitleText\" id=\"storyTitleText" + i + "\" onclick=\"selectStory(" + i + ");\">" + curCity.stories[i].title + "</p>";
                    storyTitlesInnerHTML += "</div>";
                }
            }
            else
            {
                storyTitlesInnerHTML = "No stories found.";
            }
            
            // fill in storiestext div with curCity's stories
            $('#storyTitles').html(storyTitlesInnerHTML);
            
            selectStory(0);
        }
        catch(e) { alert("Error: " + e.message); }
        storiesLoaded = true;
    }
}

function selectStory(newStoryIndex)
{
    try
    {
        if(curStoryIndex == newStoryIndex)
            return;
        
        if(curStoryIndex != null)
        {
            document.getElementById("storyTitle" + curStoryIndex.toString()).className = "storyTitle";
            document.getElementById("storyTitleText" + curStoryIndex.toString()).setAttribute("onclick","selectStory(" + curStoryIndex + ");");
        }
        
        if(newStoryIndex != null)
        {
            document.getElementById("storyTitle" + newStoryIndex.toString()).className = "storyTitle selectedStoryTitle";
            document.getElementById("storyTitleText" + newStoryIndex.toString()).setAttribute("onclick","");
            
            if(curCity != null && curCity.stories.length > newStoryIndex)
            {
                $('#storyText').html(curCity.stories[newStoryIndex].html);
            }                    
        }
        
        curStoryIndex = newStoryIndex;
    }
    catch(e)
    {
        alert("error: " + e.message);
    }
}

/* Pictures */
var curSpeed = 0; /* -50000,-20000,-10000,0,10000,20000,50000 */
var curImageIndex = 0;
var isClickScrolling = false;
function loadPictures()
{
    if(!picturesLoaded)
    {
        try
        {
            $('#picturesMain').css({ background: 'url(../img/' + curCity.shortName + '/bkg.gif)' });

            for(i = 0; i < curCity.pictures.length; i++)
            {
                var newThumbnail = "<td><div class='thumbnail' id='thumbnail" + (i+1) + "'><img class='thumbnailimage' src='" + BASEDIR + "/img/" + curCity.shortName + "/thumbs/" + curCity.pictures[i].url + "-1.jpg' title='" + curCity.pictures[i].title + "' /></div></td>";
                $('#thumbnails tr').append(newThumbnail);
                var newImage = "<div class='imageContainer' id='imageContainer" + (i+1) + "'><img src='" + curCity.picturesUrl + curCity.pictures[i].url + ".jpg' /></div>";
                $('#imageContainers').append(newImage);
            }
            
            $('.thumbnail').css({opacity: "0.5"});

            changeImage(1);
            
            $(document).ready(function()
            {
                $('#imageArrowLeft').hover(function()
                    { $('#imageArrowLeft').css("backgroundImage","url(../img/arrowSelected_l.png)"); }, function()
                    { $('#imageArrowLeft').css("backgroundImage","url(../img/arrow_l.png)");});
                $('#imageArrowRight').hover(function()
                    { $('#imageArrowRight').css("backgroundImage","url(../img/arrowSelected_r.png)");}, function()
                    { $('#imageArrowRight').css("backgroundImage","url(../img/arrow_r.png)");});
                $('#imageArrowLeft').click(function()
                { 
                    changeImage(curImageIndex - 1);
                });                
                $('#imageArrowRight').click(function()
                { 
                    changeImage(curImageIndex + 1);
                });
                $('#thumbnailsWindow').mousemove(function(e)
                {
                    if(isClickScrolling)
                        return;           
                    var x = (e.clientX - $('#content_frame')[0].offsetLeft + 2) / $('#thumbnailsWindow')[0].clientWidth;
                    var speed = 0;
                    
                    if(x < .01)
                        scroll(-50000);
                    else if (x < .10)
                        scroll(-100000);
                    else if (x < .20)
                        scroll(-500000);
                    else if (x > .99)
                        scroll(50000);
                    else if (x > .90)
                        scroll(100000);
                    else if (x > .80)
                        scroll(500000);
                    else
                        stopScrolling();
                });
                $('#imageContainers').mousewheel(function(event, delta)
                {
                    if (delta > 0)
                    {
                        changeImage(curImageIndex - 1);
                    }
                    else if (delta < 0)
                    {
                        changeImage(curImageIndex + 1);
                    }
                    return false;
                });
                $(document).keydown( function(e)
                {
                    if(e.keyCode == 37)
                    {
                        changeImage(curImageIndex - 1);                
                    }
                    else if (e.keyCode == 39)
                    {
                        changeImage(curImageIndex + 1);
                    }
                });
                $('#thumbnailsWindow').hover(function(){}, function(){ stopScrolling(); });
                $('.thumbnail').hover(function()
                {
                    $(this).stop();
                    $(this).animate({opacity: "1"}, 333);
                },function()
                {
                    $(this).stop();
                    $(this).animate({opacity: "0.5"}, 333);
                });
                $('.thumbnail').click(function()
                {
                    isClickScrolling = true;
                    changeImage(parseInt(this.id.replace("thumbnail","")));
                    setTimeout("isClickScrolling = false;",333);
                });
            });
        }
        catch(e) { alert("error: " + e.message); }
        picturesLoaded = true;
    }
}
function scroll(newSpeed)
{
    if(newSpeed != curSpeed)
    {
        stopScrolling();
        if(newSpeed < 0)
            $('#thumbnailsWindow').animate({scrollLeft: '-=99999px'}, -1 * newSpeed, 'linear');
        else
            $('#thumbnailsWindow').animate({scrollLeft: '+=99999px'}, newSpeed, 'linear');
        curSpeed = newSpeed;
    }
}
function stopScrolling()
{
    curSpeed = 0;
    $('#thumbnailsWindow').stop();
}
function changeImage(newImageIndex)
{
    stopScrolling();
    
    if(newImageIndex < 1)
    {
        newImageIndex = curCity.pictures.length;
    }
    else if(newImageIndex > curCity.pictures.length)
    {
        newImageIndex = 1;
    }
    
    curImageIndex = newImageIndex;
    
    // update thumbnails
    $('.thumbnail').css("backgroundColor","Black");
    $('#thumbnail' + newImageIndex).css("backgroundColor","#18C");
    
    // update image
    $('.imageContainer').hide();
    $('#imageContainer' + newImageIndex).show();

    // center highlighted thumbnail
    {
        var parent = $('#thumbnail' + newImageIndex).parent()[0];
        $('#thumbnailsWindow').animate({scrollLeft: parent.offsetLeft - (400 - (parent.clientWidth/2))}, 333);
    }
}

/* Map */
var map;
function loadMap()
{
    if(!mapLoaded)
    {
        try
        {
            if (!(window.attachEvent))
            {
                appendJS("http://dev.virtualearth.net/mapcontrol/v6.2/js/atlascompat.js");               
            }
            appendJS("http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&onScriptLoad=initMap");
        }
        catch(e) { alert("Error: " + e.message); }
        mapLoaded = true;
    }
}
function appendJS(filename)
{
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    document.getElementsByTagName("head")[0].appendChild(fileref);
}
function initMap()
{
    try
    {
        //load up the map
        map = new VEMap('myMap');
        
        if(curCity != null)
        {
            map.LoadMap(new VELatLong(curCity.map.latitude, curCity.map.longitude), curCity.map.zoomLevel, VEMapStyle.Road, false, VEMapMode.Mode2D, false);
        }
        else
        {
            map.LoadMap(new VELatLong(0,0), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, false);
        }
    }
    catch(e) { /*alert("Failure loading map: " + e.message); */ }
}

/* Faq */
function loadFAQ()
{
   if(!faqLoaded)
    {
        try
        {
           var innerHTML = "";
            
            if(curCity != null)
            {
                for(i = 1; i <= curCity.faqs.length; i++)
                {
                    // question
                    innerHTML += "<div class=\"question\" id=\"question" + i + "\">";
                    innerHTML += "<p class=\"questionNumber\">" + i + "</p>";
                    innerHTML += "<p class=\"questionText\">" + curCity.faqs[i-1].question + "</p>";
                    innerHTML += "<p class=\"showhide\" id=\"showhide" + i + "\">show >>></p>";
                    innerHTML += "</div>";
                    
                    // answer
                    innerHTML += "<div class=\"answer\" id=\"answer" + i + "\">" + curCity.faqs[i-1].answer + "</div>";            
                }
            }
            else
            {
                innerHTML = "No faq found.";
            }
            
            // fill in faqs div with curCity's faq
            $('#faqs').html(innerHTML);
            $('.answer').hide();
            
            $(document).ready(function()
            {
                $(".showhide").click( function()
                {
                    var num = this.id.replace("showhide","");
                    $('#answer' + num).toggle();
                    $(this).text(($(this).text() == "show >>>") ? "<<< hide" : "show >>>");
                });
            });
        }
        catch(e) { alert("Error: " + e.message); }
        faqLoaded = true;
    }
}
